<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
      label-position="top"
      :rules="rules"
      label-width="100px"
      class="addVideo"
    >
      <el-form-item
        label="小程序类型"
        prop="app_type"
      >
        <el-radio-group
          v-model="form.app_type"
          @change="appTypeChange"
        >
          <el-radio label="1">微信小程序</el-radio>
          <el-radio label="2">抖音小程序</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="小程序"
        prop="miniAppId"
      >
        <el-select
          v-model="form.miniAppId"
          clearable
          style="width:100%;"
          placeholder="请选择"
          filterable
        >
          <el-option
            v-for="item in miniAppList"
            :key="item.app_id"
            :label="item.mina_name || item.name"
            :value="item.app_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span class="dialog-footer rowFlex">
      <el-button
        class="btn"
        @click="close"
      >取 消</el-button>
      <el-button
        :loading="loading"
        class="btn"
        type="primary"
        @click="submit"
      >确 定</el-button>
    </span>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { appAuthBelong, miniAppAdd } from '@/api/miniApp'
export default {
  data() {
    return {
      loading: false,
      form: {
        miniAppId: '',
        app_type: '1'
      },
      rules: {
        miniAppId: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        app_type: [{ required: true, message: '请选择小程序类型', trigger: 'change' }]
      },
      miniAppList: []
    }
  },
  mounted() {
    this.appAuthBelong()
  },
  methods: {
    ...mapActions('user', ['getMenuRouter']),
    appTypeChange() {
      this.appAuthBelong()
      this.form.miniAppId = ''
    },
    appAuthBelong() {
      const param = {
        app_type: this.form.app_type
      }
      appAuthBelong(param).then((res) => {
        this.miniAppList = res.data
      })
    },
    close() {
      this.$emit('cancel')
    },
    submit() {
      this.loading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          const param = this.miniAppList.find((item) => item.app_id === this.form.miniAppId)
          param.app_type = this.form.app_type
          miniAppAdd(param).then((res) => {
            if (res.status_code === 1) {
              this.close()
              this.$emit('ok')
              this.getMenuRouter()
            }
            this.loading = false
          })
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
.content {
  padding: 20px;
  .addVideo {
    ::v-deep .el-form-item__label {
      font-weight: 600;
    }
  }

  .dialog-footer {
    width: 90%;
    padding-right: 10px;
  }
}
</style>